<template>
  <div class="order_list">
    <van-nav-bar title="申请售后" left-text="返回" left-arrow :z-index="999" @click-left="$router.back()" />
    <van-tabs sticky :active="activeIndex" :swipe-threshold="5" :color="CFG.colorPrimary"  :title-active-color="CFG.colorPrimary"
     @click="handleTabClick"><van-tab v-for="tab in tabsItem" 
     :title="tab.name" :key="tab.type"></van-tab>
     </van-tabs>

    <van-list v-model="loading" :finished="finished" :immediate-check="false" :offset="100" @load="loadMore">
      <van-panel v-for="(el, i) in items" class="order_list--panel" :key="i" title="" :status="getStatusText(el.status)">
        <div><van-card class="order_list--van-card" :key="i" :title="el.orderItem.title" :num="el.quantity" :price="el.orderItem.price" :thumb="el.orderItem.image" /></div>
        <div slot="footer" style="text-align: right;">
          <van-button size="small" @click="toOrderDetail(el.order_id)">查看详情</van-button>
          <van-button size="small" v-if="el.status == 0" @click="service_cancel(el.id)">撤销申请</van-button>
          <van-button size="small" v-if="el.status == 1" @click="service_complete(el.id)">确认解决</van-button>
        </div>
      </van-panel>
    </van-list>
    <is-empty v-if="items.length == 0">抱歉,没有找到符合条件的订单</is-empty>
  </div>
</template>

<script>
import { Tab, Tabs, Panel, Card } from 'vant';
import { Dialog } from 'vant';
import { Toast } from 'vant';

import IsEmpty from '@/components/include/empty/';
import loadMore from '@/components/mixin/list-load-more';

const STATUS_TEXT = {
  0: '待处理',
  1: '处理中',
  10: '处理成功'
};

export default {
  name: 'order-list',

  mixins: [loadMore],

  data() {
    return {
      activeIndex: 0,
      items: [],
      tabsItem: [
        {
          name: '待处理',
          status: 0
        },
        {
          name: '处理中',
          status: 1
        },
        {
          name: '处理成功',
          status: 10
        }
      ]
    };
  },

  watch: {
    $route: 'resetInit'
  },

  created() {
    this.resetInit();
  },

  methods: {

    // 进入订单详情
    toOrderDetail(order_id) {
      this.$router.push({
        path: "/orderViews",
        query: {
          order_id: order_id
        }
      });
    },

    initData() {
      const i = this.activeIndex;
      const status = this.tabsItem[i].status;

      this.apiPost('/shop.order/service', {
        page_size: this.pages.pageSize,
        page: this.pages.currPage,
        status
      }).then(res => {
        this.items.push(...(res.data || []));
        this.pages.listsCount = res.data.length;
        return {
          pageSize: this.pages.pageSize,
          currPage: this.pages.currPage,
          listsCount: res.data.length
        };
      });
    },


    // 已解决
    service_complete(id) {
      Dialog.confirm({
        message: '问题是否解决了？'
      })
        .then(() => {
          this.apiPost('/shop.order/service_complete', {
            service_id: id
          }).then(res => {
            if (res.code == 0) {
              Toast.success('操作成功');
              this.resetInit();
            } else {
              Toast.fail(res.msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });

    },


    // 撤消
    service_cancel(id) {
      Dialog.confirm({
        message: '确认撤销吗？'
      })
        .then(() => {
          this.apiPost('/shop.order/service_cancel', {
            service_id: id
          }).then(res => {
            if (res.code == 0) {
              Toast.success('撤销成功');
              this.resetInit();
            } else {
              Toast.fail(res.msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    handleTabClick(index) {
      if (this.activeIndex != index) {
        this.activeIndex = index;
        this.resetInit();
      }
    },
    getStatusText(status) {
      return STATUS_TEXT[status] || '';
    }
  },
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Panel.name]: Panel,
    [Card.name]: Card,
    [IsEmpty.name]: IsEmpty
  }
};
</script>

<style lang="scss" scoped>
.order_list {
  padding-bottom: 0;

  &--footer_btn {
    text-align: right;
  }
  &--panel {
    margin-bottom: 10px;
  }

  &--van-card {
    background-color: #fafafa;
  }

  &--total {
    text-align: right;
    padding: 10px;
  }
}
</style>
